<template>
    <div>
        <el-form :inline="true" :model="queryParam" class="demo-form-inline">
            <el-form-item label="查询条件">
                <el-input clearable  size="mini" v-model="queryParam.keyword" placeholder="请输入店铺名称/店铺电话"></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-select clearable size="mini" v-model="queryParam.state" placeholder="店铺状态">
                    <el-option label="待审核" value="0"></el-option>
                    <el-option label="正常" value="1"></el-option>
                    <el-option label="禁用" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="管理员">
                <el-select filterable clearable size="mini" v-model="queryParam.adminId" placeholder="选择管理员">
                    <el-option v-for="item in employeeList"
                               :key="item.id"
                               :label="item.username"
                               :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button size="mini" type="primary" @click="toQuery">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    label="店铺名称"
                    width="120" prop="name"/>
            <el-table-column
                    prop="tel"
                    label="店铺联系电话"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="registerTime"
                    label="店铺入驻时间">
            </el-table-column>
            <el-table-column
                    prop="state"
                    label="店铺状态">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.state == 0" type="default">待审核</el-tag>
                    <el-tag v-else-if="scope.row.state == 1" type="success">正常</el-tag>
                    <el-tag v-else-if="scope.row.state == 2" type="warning">关闭</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    prop="logo"
                    label="店铺logo">
                <!-- 用于表格中列的自定义 scope.row可以获取当前这一整行的数据-->
                <template slot-scope="scope">
                    <el-image
                            style="width: 100px; height: 100px"
                            :src="scope.row.logo"
                            :preview-src-list="[scope.row.logo]">
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="店铺地址">
            </el-table-column>
            <el-table-column
                    prop="admin.username"
                    label="店铺管理员">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-button :disabled="scope.row.state != 0" type="text" size="small" @click="shengheClick(scope.row.id,1)">审核通过</el-button>
                    <el-button type="text" size="mini" @click="shengheClick(scope.row.id,2)">关闭</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryParam.currentPage"
                :page-sizes="[1, 2, 3, 4]"
                :page-size="queryParam.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                queryParam: {
                    currentPage:1,
                    pageSize:2
                },
                employeeList:[],
                multipleSelection:[],
                tableData: [],
                total:0
            }
        },
        mounted() {
            this.toQuery();
            this.findAllEmployee();
        },
        methods:{
            shengheClick(id,state){
                //发送请求并携带参数
                this.$http.get("/shop/shenghe?id="+id+"&state="+state).then(res=>{
                    if (res.data.success){
                        this.toQuery()
                    }
                    this.$notify({
                        title: '提示',
                        message: res.data.message,
                        type: 'warning'
                    });
                })
            },
            toQuery() {
                // console.log('查询条件---->'+JSON.stringify(this.queryParam));
                this.$http.post("/shop",this.queryParam).then(res=>{
                    this.tableData = res.data.data;
                    this.total = res.data.total;
                })
            },
            findAllEmployee(){
                this.$http.get("/employee/findall").then(res => {
                    this.employeeList = res.data;
                })
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.queryParam.pageSize = val;
                this.toQuery();
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.queryParam.currentPage = val;
                this.toQuery();
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            }
        }
    }
</script>
